<template>
  <div class="data-collection-container">
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>数据采集配置</h2>
    </div>

    <!-- 数据源连接状态 -->
    <div class="data-sources-section">
      <el-row :gutter="20">
        <!-- 抖音平台数据 -->
        <el-col :span="12">
          <el-card class="source-card">
            <div class="source-header">
              <div class="source-info">
                <span class="source-title">抖音平台数据</span>
                <el-icon class="source-icon" color="#6366f1">
                  <VideoCamera />
                </el-icon>
              </div>
            </div>
            <div class="source-content">
              <div class="status-info">
                <span class="status-label">已连接</span>
                <div class="sync-time">最后同步: 2023-08-11 14:30</div>
              </div>
              <el-button type="primary" class="sync-btn" @click="syncData('douyin')">
                立即同步
              </el-button>
            </div>
          </el-card>
        </el-col>
        
        <!-- 火山引擎数据 -->
        <el-col :span="12">
          <el-card class="source-card">
            <div class="source-header">
              <div class="source-info">
                <span class="source-title">火山引擎数据</span>
                <el-icon class="source-icon" color="#6366f1">
                  <Menu />
                </el-icon>
              </div>
            </div>
            <div class="source-content">
              <div class="status-info">
                <span class="status-label">已连接</span>
                <div class="sync-time">最后同步: 2023-08-11 12:45</div>
              </div>
              <el-button type="primary" class="sync-btn" @click="syncData('huoshan')">
                立即同步
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 采集任务管理 -->
    <div class="task-management-section">
      <el-card class="task-card">
        <div class="task-header">
          <h3>采集任务管理</h3>
        </div>
        
        <!-- 搜索筛选区域 -->
        <div class="search-section">
          <el-row :gutter="20" class="search-row">
            <el-col :span="6">
              <div class="search-item">
                <label>任务类型</label>
                <el-select v-model="searchForm.taskType" placeholder="全部任务" clearable>
                  <el-option label="全部任务" value="" />
                  <el-option label="短剧数据" value="drama" />
                  <el-option label="粉丝图像" value="fans" />
                  <el-option label="用户数据" value="user" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="search-item">
                <label>状态</label>
                <el-select v-model="searchForm.status" placeholder="全部状态" clearable>
                  <el-option label="全部状态" value="" />
                  <el-option label="已完成" value="completed" />
                  <el-option label="运行中" value="running" />
                  <el-option label="已暂停" value="paused" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="searchTasks">查询</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="info" @click="showCreateDialog">新建任务</el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 任务列表表格 -->
        <div class="table-section">
          <el-table :data="taskList" style="width: 100%" stripe>
            <el-table-column prop="name" label="任务名称" min-width="200" />
            <el-table-column prop="type" label="类型" width="120" align="center" />
            <el-table-column prop="frequency" label="频率" width="120" align="center" />
            <el-table-column prop="lastExecution" label="最后执行" width="180" align="center" />
            <el-table-column prop="status" label="状态" width="120" align="center">
              <template #default="{ row }">
                <el-tag 
                  :type="getStatusType(row.status)"
                  size="small"
                >
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template #default="{ row }">
                <div class="action-buttons">
                  <el-button 
                    :type="row.status === 'running' ? 'warning' : 'success'"
                    size="small"
                    @click="toggleTask(row)"
                  >
                    <el-icon><VideoPlay v-if="row.status !== 'running'" /><VideoPause v-else /></el-icon>
                  </el-button>
                  <el-button 
                    type="warning"
                    size="small"
                    @click="pauseTask(row)"
                  >
                    <el-icon><VideoPause /></el-icon>
                  </el-button>
                  <el-button 
                    type="primary"
                    size="small"
                    @click="editTask(row)"
                  >
                    <el-icon><Edit /></el-icon>
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <!-- 新建任务对话框 -->
    <el-dialog 
      v-model="createDialogVisible" 
      title="新建采集任务" 
      width="600px"
      @close="resetCreateForm"
    >
      <el-form :model="createForm" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="createForm.name" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select v-model="createForm.type" placeholder="请选择任务类型">
            <el-option label="短剧数据" value="drama" />
            <el-option label="粉丝图像" value="fans" />
            <el-option label="用户数据" value="user" />
          </el-select>
        </el-form-item>
        <el-form-item label="执行频率">
          <el-select v-model="createForm.frequency" placeholder="请选择执行频率">
            <el-option label="每日一次" value="daily" />
            <el-option label="每5分钟" value="5min" />
            <el-option label="每小时" value="hourly" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createTask">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { VideoCamera, Menu, VideoPlay, VideoPause, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'DataCollection',
  components: {
    VideoCamera,
    Menu,
    VideoPlay,
    VideoPause,
    Edit
  },
  setup() {
    // 搜索表单
    const searchForm = reactive({
      taskType: '',
      status: ''
    })

    // 新建任务表单
    const createForm = reactive({
      name: '',
      type: '',
      frequency: ''
    })

    const createDialogVisible = ref(false)

    // 任务列表数据
    const taskList = ref([
      {
        id: 1,
        name: '短剧基本信息采集',
        type: '短剧数据',
        frequency: '每日一次',
        lastExecution: '2023-08-11 03:00',
        status: 'completed'
      },
      {
        id: 2,
        name: '短剧流量实时监控',
        type: '短剧数据',
        frequency: '每5分钟',
        lastExecution: '2023-08-11 14:30',
        status: 'running'
      },
      {
        id: 3,
        name: '用户粉丝图像更新',
        type: '粉丝图像',
        frequency: '每日一次',
        lastExecution: '2023-08-10 04:00',
        status: 'completed'
      },
      {
        id: 4,
        name: '视频数据采集',
        type: '用户数据',
        frequency: '每日一次',
        lastExecution: '2023-08-11 05:00',
        status: 'completed'
      }
    ])

    // 数据同步
    const syncData = (source) => {
      ElMessage.success(`正在同步${source === 'douyin' ? '抖音' : '火山引擎'}数据...`)
      // 这里可以添加实际的同步逻辑
    }

    // 搜索任务
    const searchTasks = () => {
      ElMessage.info('正在搜索任务...')
      // 这里可以添加实际的搜索逻辑
    }

    // 显示新建对话框
    const showCreateDialog = () => {
      createDialogVisible.value = true
    }

    // 重置创建表单
    const resetCreateForm = () => {
      createForm.name = ''
      createForm.type = ''
      createForm.frequency = ''
    }

    // 创建任务
    const createTask = () => {
      if (!createForm.name || !createForm.type || !createForm.frequency) {
        ElMessage.warning('请填写完整信息')
        return
      }
      ElMessage.success('任务创建成功')
      createDialogVisible.value = false
      resetCreateForm()
    }

    // 切换任务状态
    const toggleTask = (row) => {
      if (row.status === 'running') {
        row.status = 'paused'
        ElMessage.success('任务已暂停')
      } else {
        row.status = 'running'
        ElMessage.success('任务已启动')
      }
    }

    // 暂停任务
    const pauseTask = (row) => {
      row.status = 'paused'
      ElMessage.success('任务已暂停')
    }

    // 编辑任务
    const editTask = (row) => {
      ElMessage.info('编辑任务功能开发中...')
    }

    // 获取状态类型
    const getStatusType = (status) => {
      switch (status) {
        case 'completed':
          return 'success'
        case 'running':
          return 'primary'
        case 'paused':
          return 'warning'
        default:
          return 'info'
      }
    }

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 'completed':
          return '已完成'
        case 'running':
          return '运行中'
        case 'paused':
          return '已暂停'
        default:
          return '未知'
      }
    }

    onMounted(() => {
      console.log('DataCollection mounted')
    })

    return {
      searchForm,
      createForm,
      createDialogVisible,
      taskList,
      syncData,
      searchTasks,
      showCreateDialog,
      resetCreateForm,
      createTask,
      toggleTask,
      pauseTask,
      editTask,
      getStatusType,
      getStatusText
    }
  }
}
</script>

<style scoped>
.data-collection-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面标题 */
.page-title {
  margin-bottom: 24px;
}

.page-title h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

/* 数据源卡片 */
.data-sources-section {
  margin-bottom: 24px;
}

.source-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.source-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.source-header {
  margin-bottom: 20px;
}

.source-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.source-title {
  font-size: 18px;
  font-weight: 600;
  color: #6366f1;
}

.source-icon {
  font-size: 24px;
}

.source-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.status-info {
  flex: 1;
}

.status-label {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.sync-time {
  font-size: 14px;
  color: #666;
}

.sync-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
}

/* 任务管理区域 */
.task-management-section {
  margin-bottom: 24px;
}

.task-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.task-header {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}

.task-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 24px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.search-row {
  align-items: flex-end;
}

.search-item {
  display: flex;
  flex-direction: column;
}

.search-item label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.search-item .el-select {
  width: 100%;
}

/* 表格区域 */
.table-section {
  background-color: white;
  border-radius: 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-buttons .el-button {
  padding: 6px;
  min-width: 32px;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-collection-container {
    padding: 10px;
  }
  
  .source-content {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .search-row .el-col {
    margin-bottom: 16px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}

/* 状态标签样式 */
.el-tag {
  border-radius: 4px;
  font-weight: 500;
}

/* 按钮样式优化 */
.el-button {
  border-radius: 6px;
  font-weight: 500;
}

.el-button--primary {
  background-color: #6366f1;
  border-color: #6366f1;
}

.el-button--info {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
</style>